﻿---
layout: layout
---
<div class="three columns sidebar">



</div>
<div class="container">
        <div class="sixteen columns">
            <div class="photo-section" style="z-index: 3; position: absolute; width: inherit;
     cursor: pointer; visibility: visible;">
                <div class="main_photograph" style="max-width: {{page.photograph_max_width}}px; margin-left: auto; margin-right:auto;">
                    <div class="info_comments" style="position: fixed; visibility: hidden;">
                        <div class="info_comment_links" style="padding: 2px; margin-left: 5px; margin-top: 5px;
                                                                                                                                                                                                                    float: left; background: #555;">
                            <a href="#"><span style="color: white; font-size: 9px;">Info & Comments</span></a>
                        </div>
                    </div>
                    <!--[if lt IE 9]>
                        <img src="{{site.fullsizepath}}{{page.photograph}}" alt="{{page.title}}" style="width:100%"/>
                    <![endif]-->
                    <!--[if gte IE 9]> <!-- dontremove-->
                        <picture alt="{{page.title}}">
                            <!-- <source src="{{site.smallpath}}{{page.photograph}}"/> -->
                            <source src="{{site.smallpath}}{{page.photograph}}"/>
                            <!-- <source src="{{site.mediumpath}}{{page.photograph}}" media="(min-width:350px)"/> -->
                            <source src="{{site.mediumpath}}{{page.photograph}}" media="(min-width:350px)"/>
                            <!-- <source src="{{site.largepath}}{{page.photograph}}" media="(min-width:450px)"/> -->
                            <source src="{{site.largepath}}{{page.photograph}}" media="(min-width:450px)"/>
                            <!-- <source src="{{site.fullsizepath}}{{page.photograph}}" media="(min-width:900px)" /> -->
                            <source src="{{site.fullsizepath}}{{page.photograph}}" media="(min-width:900px)" />
                            <noscript>
                                <img src="{{site.fullsizepath}}{{page.photograph}}" alt="{{page.title}}"/>    
                            </noscript>
                        </picture>
                    <![endif]-->
                    <div class="photograph_title">{{page.title}}</div>
                    {% if page.comments == 'true' %}<span class="comments_reactions" style="float: right;"><a href="{{site.url}}{{ page.url}}#disqus_thread">Comments</a></span>{% endif %}
               
                    <br/>
     
                </div>
                <div class="sixteen columns">
                    <div class="meta">
                        {% if page.previous.url %}
                        <a class="article_nav left" href="{{page.previous.url}}" onClick="_gaq.push(['_trackEvent', 'Photograph', 'Navigate', '{{page.previous.title}}']);" title="Previous Post: {{page.previous.title}}">&laquo; {{page.previous.title}}</a>
                        {% endif %}
                        {% if page.next.url %}
                        <a class="article_nav right" href="{{page.next.url}}"  onClick="_gaq.push(['_trackEvent', 'Photograph', 'Navigate', '{{page.next.title}}']);" title="Next Post: {{page.next.title}}">{{page.next.title}} &raquo;</a>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="photo_comments" style="visibility: hidden;">
                <div class="five columns">
                    <div class="photograph_details" style="display: block; width: inherit;">
                        <div class="comment_photograph" style="cursor: pointer; width: inherit;">
                            <!--[if lt IE 9]>
                                <img src="{{site.fullsizepath}}{{page.photograph}}" alt="{{page.title}}" style="width:100%"/>
                            <![endif]-->
                            <!--[if gte IE 9]> <!-- dontremove-->
                            <picture alt="{{page.title}}" style="width: inherit;">
                                <!-- <source src="{{site.smallpath}}{{page.photograph}}" style="width: inherit;" /> -->
                                <source src="{{site.smallpath}}{{page.photograph}}" style="width: inherit;" />
                                <!-- <source src="{{site.mediumpath}}{{page.photograph}}" media="(min-width:350px)" style="width: inherit;"/> -->
                                <source src="{{site.mediumpath}}{{page.photograph}}" media="(min-width:350px)" style="width: inherit;"/>
                                <!-- <source src="{{site.largepath}}{{page.photograph}}" media="(min-width:450px)" style="width: inherit;"/> -->
                                <source src="{{site.largepath}}{{page.photograph}}" media="(min-width:450px)" style="width: inherit;"/>
                                <!-- <source src="{{site.fullsizepath}}{{page.photograph}}" media="(min-width:900px)" style="width: inherit;" /> -->
                                <source src="{{site.fullsizepath}}{{page.photograph}}" media="(min-width:900px)" style="width: inherit;" />
                                <noscript>
                                    <img src="{{site.fullsizepath}}{{page.photograph}}" alt="{{page.title}}" style="width: inherit;"/>    
                                </noscript>
                            </picture>
                            <![endif]-->
                        </div>
                        <div id="image_title">{{page.title}}</div>
                        <div id="date">{{page.date}}</div>

                        <div id="description" style="float: left; overflow: no-display;">
                            {{content}}
                        </div>
                        <div id="photo_exif">exif</div>
                        <div id="camera">{{page.camera}}</div>
                        <div id="lens">{{page.lens}}</div>
                        <div id="exposure">{{page.exposure}}</div>
                        <div id="iso">{{page.iso}}</div>
                    </div>
                </div>
                <div class="ten columns" style="float: right; display: block;">
                    <div id="disqus_thread"></div>
                </div>
            </div>
        </div>


{% if page.comments == 'true' %}

<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'markgrovesphotography'; // required: replace example with your forum shortname
    // var disqus_developer = 1; // developer mode is on
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    (function () {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
{% endif %}
    
    </div>